@import './variables.less';
@import '../../style/mixins.less';

.fnx-popup {
	position: fixed;
	max-height: 100%;
	overflow-y: auto;
	background-color: var(--fnx-popup-background-color);
	-webkit-overflow-scrolling: touch;

	&--center {
		top: 50%;
		left: 50%;
		transform: translate3d(-50%, -50%, 0);

		&.fnx-popup--round {
			border-radius: var(--fnx-popup-round-border-radius);
		}
	}

	&--top {
		top: 0;
		left: 0;
		width: 100%;

		&.fnx-popup--round {
			border-radius: 0 0 var(--fnx-popup-round-border-radius)
				var(--fnx-popup-round-border-radius);
		}
	}

	&--right {
		top: 50%;
		right: 0;
		transform: translate3d(0, -50%, 0);

		&.fnx-popup--round {
			border-radius: var(--fnx-popup-round-border-radius) 0 0
				var(--fnx-popup-round-border-radius);
		}
	}

	&--bottom {
		bottom: 0;
		left: 0;
		width: 100%;

		&.fnx-popup--round {
			border-radius: var(--fnx-popup-round-border-radius)
				var(--fnx-popup-round-border-radius) 0 0;
		}
	}

	&--left {
		top: 50%;
		left: 0;
		transform: translate3d(0, -50%, 0);

		&.fnx-popup--round {
			border-radius: 0 var(--fnx-popup-round-border-radius)
				var(--fnx-popup-round-border-radius) 0;
		}
	}

	&--safe-area-inset-bottom {
		.safe-area-inset-bottom();
	}

	&--slide-top-enter-active,
	&--slide-left-enter-active,
	&--slide-right-enter-active,
	&--slide-bottom-enter-active {
		transition: transform var(--fnx-animation-duration-base)
			var(--fnx-animation-timing-function-enter);
	}

	&--slide-top-exit-active,
	&--slide-left-exit-active,
	&--slide-right-exit-active,
	&--slide-bottom-exit-active {
		transition: transform var(--fnx-animation-duration-base)
			var(--fnx-animation-timing-function-exit);
	}

	&--fade-enter-active {
		transition: opacity var(--fnx-animation-duration-base)
			var(--fnx-animation-timing-function-enter);
	}

	&--fade-exit-active {
		transition: opacity var(--fnx-animation-duration-base)
			var(--fnx-animation-timing-function-exit);
	}

	&--fade {
		&-enter,
		&-exit-active {
			opacity: 0;
		}

		&-enter-active {
			opacity: 1;
		}
	}

	&--slide-top {
		&-enter,
		&-exit-active {
			transform: translate3d(0, -100%, 0);
		}

		&-enter-active {
			transform: translate3d(0, 0, 0);
		}
	}

	&--slide-right {
		&-enter,
		&-exit-active {
			transform: translate3d(100%, -50%, 0);
		}

		&-enter-active {
			transform: translate3d(0, -50%, 0);
		}
	}

	&--slide-bottom {
		&-enter,
		&-exit-active {
			transform: translate3d(0, 100%, 0);
		}

		&-enter-active {
			transform: translate3d(0, 0, 0);
		}
	}

	&--slide-left {
		&-enter,
		&-exit-active {
			transform: translate3d(-100%, -50%, 0);
		}

		&-enter-active {
			transform: translate3d(0, -50%, 0);
		}
	}
}
